window.onload = function (){ //所有dom元素加载完后执行此代码

//一、顶部轮播脚本开始
	/*功能
	1、点击两个控制按钮能够切换图片，切换图片的时候指示器随着图片变化改变
	2、点击指示器也会切换到对应的图片
	3、自动轮播图片，鼠标放到轮播区域中自动轮播就会停止，鼠标出了轮播区域，
	   重新启动自动轮播
	 实现：
	 1、写结构的时候，让所有图片重叠在一起，并且都消失掉  
	  2、给图片定义一个类名active 谁拿到这个类名谁就会出现 
	  3、同时只能给一个图片发这个类名，怎么控制，借用一个变量index
	*/
	//获取元素
	let cwrap = document.querySelector('.carousel');
	let prevBtn = cwrap.querySelector('.cleft');//向前按钮
	let nextBtn = cwrap.querySelector('.cright');//向后按钮
	let olis = cwrap.querySelectorAll('.image-list>li');//图片s
	let pointers = cwrap.querySelectorAll('.pointer>li');//点
	let index = 0;
	let timer = null;
	//清除类名的函数
	function clearClassName (){
		//重置还原所有的图片和小点指示器的类名
		for (let i = 0; i < olis.length; i++) {
			olis[i].className = 'img-item';
			pointers[i].classList.remove('point-active');
		}
	}
	function cnext(){  //向后切换图片方法
		if (index >= olis.length-1) { //判断如果index超出图片索引数量，重置
			index = 0;
		} else{
		index++;
		}
		clearClassName ();//重置还原所有的图片的类名
		// 然后单独给某一个指定的图片添加显示类名
		olis[index].className = 'img-item active';
		pointers[index].classList.add('point-active')
	}
	function cprev(){//向前切换图片方法
		if (index <= 0) { //判断如果index超出图片索引数量，重置
			index = olis.length-1;
		} else{
		index--;
		}
		clearClassName ();//重置还原所有的图片的类名
		// 然后单独给某一个指定的图片添加显示类名
		olis[index].className = 'img-item active';
		pointers[index].classList.add('point-active')
	}
	
	function pointerChange(){
		//指示器小点切换图片方法
		let ponintIndex = this.getAttribute('data-index');
		clearClassName ()//重置还原所有的图片和小点指示器的类名
		olis[ponintIndex].className = 'img-item active';
		this.classList.add('point-active')
	}
	for (let i = 0; i < pointers.length; i++) {
		//通过循环遍历为每一个小点添加一个点击事件监听，点击了执行对应的方法
		pointers[i].addEventListener('click',pointerChange)
	}
	
	function addtimer(){//添加计时器的方法
		timer = setInterval(cnext,2000); //每隔两秒执行以下next方法
	}
	function removetimer(){//删除计时器的方法
		clearInterval(timer);
	}
	
	addtimer();
	//nextBtn.onclick = next;
	nextBtn.addEventListener('click',cnext);
	prevBtn.addEventListener('click',cprev);
	cwrap.addEventListener('mouseenter',removetimer);
	cwrap.addEventListener('mouseleave',addtimer);
	//一、顶部轮播脚本结束
	
	//二、小米秒杀轮播脚本开始
	    let prowrap = document.querySelector('.seckill-wrap'); //总的外包
		let swrap = prowrap.querySelector('.product-right'); // ul的外包
		let seckillUl = prowrap.querySelector('.producs-list'); //  ul
		let skLis = prowrap.querySelectorAll('.producs-list>a>li'); //所有li
		let size = swrap.clientWidth; //获取一下外包div的宽度，滑动一屏走的距离
		let sktimer = null;  //定义声明自动轮播的计时器
		let offset = 0;   //偏移量 tanslaterx(偏移量)
		let isEnd = null; //标志是否到头的变量
		let prevIcon = prowrap.querySelector('.iconbox>div:first-child');
		let nextIcon = prowrap.querySelector('.iconbox>div:last-child');
		//给向后按钮添加点击事件监听
		nextIcon.addEventListener('click', next)
		//给向前按钮添加点击事件监听
		prevIcon.addEventListener('click', prev);
	
		//给wrap添加鼠标进入事件，清除计时器，不让他自动轮播了
		prowrap.addEventListener('mouseenter', function() {
			clearInterval(sktimer)
		})
	
		//给wrap添加鼠标离开事件，重新加载计时器，让他自动轮播
		prowrap.addEventListener('mouseleave', function() {
			addsktimer()
		})
	
		function next(e, auto = false) { //向后轮播图片
			/* 判断轮播是否到头了
			*/
			if (offset+size<Math.floor(skLis.length/4)*size) {
				// 判断偏移量再加上一屏的距离，是否小于整体的长度
				//满足这个条件表示还没有到头
				offset +=size
				seckillUl.style.transition = 'all 1s'
				seckillUl.style.transform = `translateX(${-offset}px)`;
				// offset = u
			} else {
				//我们现在已经到头了，后面还有小于4个li
				let u = offset + skLis.length%4*size/4
				 //设置一个临时变量用来替代offset作为偏移量
				seckillUl.style.transition = 'all 1s'
				seckillUl.style.transform = `translateX(${-u}px)`;
				nextIcon.style.color = '#d0d0d0'; //按钮的颜色变成灰色
				isEnd = true;
				if (auto) {
					let timer1 = setTimeout(function() {//设置了一个一次性的定时器
						seckillUl.style.transition = 'all 1s'
						seckillUl.style.transform = `translateX(0)`;
						offset = 0;
					}, 2000)
				}
			}
		}
	
		function prev() { //向前轮播图片
			if (isEnd) {
				//因为我们向右偏移的时候最后并没有把多余li累加上，现在我们要把他累加上
				offset = offset + skLis.length%4*size/4
				isEnd = false;
			}
			if (offset>=size) {
				offset-=size
				seckillUl.style.transition = 'all 1s'
				seckillUl.style.transform = `translateX(${-offset}px)`;
				
			} else {
				
				offset=0
				seckillUl.style.transition = 'all 1s'
				seckillUl.style.transform = `translateX(0)`;
				prevIcon.style.color = '#d0d0d0';
				// 向左的按钮也变成不可用的状态
		    }
	}
		function autoplay() { //为了解决回调函数不能传参的问题，我们封装一个函数，让他在这执行
			next(event, true)
		}
	
		function addsktimer() { //添加计时器，实现自动轮播
			sktimer = setInterval(autoplay, 2000)
		}
		addsktimer();
		//小米秒杀轮播脚本结束
		
		//三、 商品展示导航切换开始
		// 1/首先先获取一共有几个商品展示模块
		let goodswrap = document.querySelectorAll('.goodsshow-wrap'); //这里跟我们css是一样的
		// 2 我们要获取每一个模块中的tabli ul
		
		for (let i = 0; i < goodswrap.length; i++) {
			let tabli = goodswrap[i].querySelectorAll('.tab-list>li');
			let goodsul = goodswrap[i].querySelectorAll('.goods-list');
			// 3 获取到每个模块中的导航li 后,给他们添加鼠标进入事件监听
			for (let i = 0; i < tabli.length; i++) {
				tabli[i].addEventListener('mouseenter', function() {
					//在我鼠标浮动到这个li上的时候，我让所有goodslist--ul 都去掉list-active
					console.log('goods');
					for (let i = 0; i < tabli.length; i++) {
						tabli[i].className = ''
						goodsul[i].className = 'goods-list'; //display :none
					}
					tabli[i].className = 'item-active';
					goodsul[i].className = 'goods-list list-active'; //display:block
				})
			}
		}
		
		//三、 商品展示导航切换结束
}